import React, { useState } from 'react';
import { Card, Button } from '@weubi/ui';
import { MagnifyingGlassIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';

interface DataItem {
  id: string;
  title: string;
  url: string;
  content: string;
  taskName: string;
  createdAt: string;
}

const DataPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [data] = useState<DataItem[]>([
    {
      id: '1',
      title: '示例数据标题 1',
      url: 'https://example.com/page1',
      content: '这是从网页抓取的示例内容，包含了重要的信息...',
      taskName: '示例爬虫任务',
      createdAt: '2024-01-15T14:30:00Z'
    },
    {
      id: '2',
      title: '示例数据标题 2',
      url: 'https://example.com/page2',
      content: '另一个示例内容，展示了数据抓取的结果...',
      taskName: '新闻网站爬取',
      createdAt: '2024-01-15T15:00:00Z'
    }
  ]);

  const filteredData = data.filter(item =>
    item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.taskName.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleExport = () => {
    // 模拟导出功能
    console.log('导出数据...');
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">抓取数据</h1>
        <Button onClick={handleExport} className="flex items-center gap-2">
          <ArrowDownTrayIcon className="h-5 w-5" />
          导出数据
        </Button>
      </div>

      <Card className="p-6">
        <div className="flex items-center gap-4 mb-6">
          <div className="relative flex-1">
            <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
            <input
              type="text"
              placeholder="搜索数据..."
              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>

        <div className="space-y-4">
          {filteredData.map((item) => (
            <div key={item.id} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
              <div className="flex justify-between items-start mb-2">
                <h3 className="text-lg font-semibold text-gray-900">{item.title}</h3>
                <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                  {item.taskName}
                </span>
              </div>
              
              <p className="text-blue-600 text-sm mb-2 hover:underline">
                <a href={item.url} target="_blank" rel="noopener noreferrer">
                  {item.url}
                </a>
              </p>
              
              <p className="text-gray-700 mb-3 line-clamp-2">
                {item.content}
              </p>
              
              <div className="flex justify-between items-center text-sm text-gray-500">
                <span>抓取时间: {new Date(item.createdAt).toLocaleString('zh-CN')}</span>
                <div className="flex gap-2">
                  <button className="text-blue-600 hover:text-blue-700">查看详情</button>
                  <button className="text-green-600 hover:text-green-700">下载</button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredData.length === 0 && (
          <div className="text-center py-12">
            <p className="text-gray-500 mb-4">
              {searchTerm ? '没有找到匹配的数据' : '暂无抓取数据'}
            </p>
            {!searchTerm && (
              <p className="text-sm text-gray-400">
                运行爬虫任务后，抓取的数据将显示在这里
              </p>
            )}
          </div>
        )}
      </Card>
    </div>
  );
};

export default DataPage;
